<template>
	<div class="Memberinfo">
	<div class="back">
	   <i class="el-icon-erp-flow backicon" @click="goback"></i>
	   <p>成为会员</p>
	</div>
	  <form class="form">
	  	<mt-field type="tel" label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>	  	
	      <div class="Obtain">
	      <!--	<mt-button v-show="show" type="primary"  @click="Obtain">获取验证码</mt-button>	  -->
	        <div v-show="show" @click="Obtain" class="button">获取验证码</div>
	      	<span v-show="!show" class="count">{{count}} s</span>
	      </div>
	  	  <mt-field type="number" label="验证码" placeholder="请输入验证码" v-model="member"></mt-field>
	  </form>
	  	<uploadCode @imgUrl="reciveUrl" :shopImg="imgUrl"></uploadCode>
	    <div class="sub">
	    	 <div class="submit" @click="submit" v-if="!!imgUrl">提交</div>
	    	 <div class="Nosubmit" v-else>提交</div>
	    </div>
</div>
</template>

<script>
import uploadCode from '@/components/m-upload/uploadCode'	
	
	
export default {
	components:{
		uploadCode
	},
	name: 'Memberinfo',
	data() {
		return {
			phone: '',	
			member:'',
			imgUrl:'',
			show:true,
			count: '',
			timer: null,
		}
	},
	created () {
		
	},
	mounted() {
		
	},
	methods: {
		//返回
		goback() {
			this.$router.go(-1)
		},
		//图片
		 reciveUrl (imgUrl) {
            this.imgUrl = imgUrl;  
		 },
		 //获取验证码
		 Obtain () {
		 	if(this.phone == "" || this.phone == null) {
				this.$messagebox.alert("请输入手机号！")
				return false;
			}else{
				var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
				if(!myreg.test(this.phone.replace(/\s+/g,""))) {
					this.$messagebox.alert("请输入正确的手机号码！")
				    return false;
				}
			}	
			 const TIME_COUNT = 60;
			     if (!this.timer) {
			       this.count = TIME_COUNT;
			       this.show = false;
			       this.timer = setInterval(() => {
			       if (this.count > 0 && this.count <= TIME_COUNT) {
			         this.count--;
			        } else {
			         this.show = true;
			         clearInterval(this.timer);
			         this.timer = null;
			        }
			       }, 1000)
			      }
		 	this.$http.get(this.$store.state.reqUrl + '/user/member/sms', {
		 		params:{
		 			phoneNo:this.phone
		 		}
		 	}).then(res => {
				console.log(111)
			}).catch(res => {
				this.$toast(res.response.data)
			})
		 },
		//提交
		submit() {
			if(this.member == "" || this.member == null) {
				this.$messagebox.alert("请先获取手机验证码！")
				return false;
			}		
			this.$http.post(this.$store.state.reqUrl + '/user/member', {
				msgCode: this.member,				
			}).then(res => {				
				this.$router.go(-1)
			}).catch(res => {
				this.$toast({
					message:res.response.data,
					duration:5000,
					})
			})
		}
	}
}
</script>

<style lang="less">
    .Memberinfo {
    	width:100%;
    	background: #FFFFFF;
    	font-size: 28px;
    	margin-top: 120px;
    	.back{
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: 88;
    		width: 100%;
    		height: 100px;
    		display: flex;
    		background: #ffffff;    		
    		.backicon{    			
    			width:80px;
    			line-height: 100px;
    			text-align: center;
    			font-size: 40px;
    			font-weight: 700;
    		}
    		p{
    			text-align: center;
    			flex: 1;
    			line-height: 100px;
    			font-size: 32px;
    			margin-right: 50px;
    		}
    	}
    	.form{
    		background: #FFFFFF;
    		width:100%;
    		.mint-cell {			   
			    min-height: 120px;
			    line-height:120px;	
			    border: 1px solid gainsboro;			   
			    .mint-cell-title{
			    	 font-size: 32px;
			    	 width:180px;
			    	 padding-left: 10px;
			    }	
			    .mint-field-core {
			    	font-size: 30px;
			    	margin:30px 0 30px 30px;
			    }	    
			}
			.Obtain{
				margin:30px 0 30px 30px;
				.button{
				height: 100px;
				line-height: 100px;
				font-size: 30px;
				width:200px;
				background: green;
				text-align: center;
				color: #ffffff;
			}
		  }			
    	}
    	.sub{
    		padding-bottom: 30px;
    		.submit{
    			margin:60px auto;
    			height: 100px;
    			width: 200px;
    			background: darkgreen;
    			color: #FFFFFF;
    			text-align: center;   			
    			line-height: 100px;
    			font-size: 32px;    			
    		}
    		.Nosubmit{
    			margin:60px auto;
    			height: 100px;
    			width: 200px;
    			background: gray;
    			color: #FFFFFF;
    			text-align: center;   			
    			line-height: 100px;
    			font-size: 32px;    			
    		}
    	}    		
    }
    
</style>